﻿
@{
    ViewBag.Title = "ExamDatil";

}

<h2>@ViewBag.Exam.Name<br/><small>( 总分: @ViewBag.Exam.TotalPoint　 时长: @ViewBag.Exam.Duration 　题数: @ViewBag.Exam.Question.Count )</small></h2>


<style type="text/css">
    .question-body {
        padding: 30px 30px 20px 30px;
        background: #FFF;
    }

    ul#exampaper-body {
        margin-bottom: 0px;
    }

        ul#exampaper-body li {
            padding-bottom: 0px;
        }

    .question-body {
        min-height: 300px;
    }
</style>

<div class="content" style="margin-bottom: 100px;">

    <div class="container">
        <div class="row">

            @if (@ViewBag.Exam.Question.Count <= 0)
            {
                <div class="alert alert-warning alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert"
                            aria-hidden="true">
                        &times;
                    </button>
                    没有题目
                </div>
            }
            @{
                var i = 0;
            }

            @foreach (var question in @ViewBag.Exam.Question)
            {
                {
                    i++;
                }
                
                <div class="col-xs-9" style="padding-right: 0px;   margin-bottom: 20px; padding-bottom: 20px;  border-bottom: 1px solid #eee;">
                    <div class="def-bk" id="bk-exampaper">
                        <div class="expand-bk-content" id="bk-conent-exampaper">
                            <div id="exampaper-header">
      
                                <div id="exampaper-desc-container">
                                    <div id="exampaper-desc" class="exampaper-filter">

                                        <div class="panel panel-default">
                                            <div class="panel-body">
                                                <b>题目 @i : </b> <div id="questionName">@question.Title </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div id="exampaper-body">
                                <div class="radio">
                                    <label>
                                        A.
                                        <input type="radio" name="@i"
                                               value="A"> @question.FirstOption
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            B.
                                            <input type="radio" name="@i"
                                                   value="B">
                                            @question.SecondOption
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            C.
                                            <input type="radio" name="@i"
                                                   value="C">
                                            @question.ThirdOption
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            D.
                                            <input type="radio" name="@i"
                                                   value="D">
                                            @question.ForthOption
                                        </label>
                                    </div>
                                </div>
                                <div id="exampaper-footer">


                                    <div id="question-navi">
                                        <div id="question-navi-controller">
                                            <i class="fa fa-arrow-circle-down"></i>
                                            <span>答案: @question.Answer</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

            }


            
        </div>
    </div>

</div>

<script>
    $(function () {
        console.log('start exam');
        var tempAnswer = {};
        $('input').each(function () {
            if ($(this)[0].checked) {
                console.log($(this)[0].name, $(this)[0].value);
                tempAnswer[$(this)[0].name] = $(this)[0].value;
            }
        });
        var answer = [];
        for(var i =1; i <= @ViewBag.Exam.Question.Count; i++)
        {
            if(tempAnswer[i] != null){
                answer.push(tempAnswer[i]);
            }else{
                answer.push(-1);
            }
        }
        $.ajax({
            url: '@Url.Action("AnswerExam", "Student")',
            type: 'post',
            data: { id: '@ViewBag.ExamId', answer: answer },
            error: function (result) {
                console.log(result);
            },
            success: function (info) {
                console.log(info);
            }
        });
        console.log(answer);

    });
</script>